<template>
    <div class="details-box">
      <el-tabs v-model="activeName" @tab-click="handleClick" v-loading="loadingData">
        <el-tab-pane label="基础信息" name="first">
          <el-form>
            <el-form-item v-for="(item, index) in baseProps" :key="index" :label="item.label + '：'">
              <span v-if="item.prop == 'user_email'">
                <span>{{ detailsData.user_email }}  </span>
                <el-button v-if="detailsData.user_email != ''" size="small" style="margin-left:20px;"  type="primary"> 解绑邮箱 </el-button>

              </span>

              <span v-else-if="item.prop == 'abnormal'">
                <span v-html="detailsData.abnormal">  </span>
                <!-- <el-button size="small" style="margin-left:20px;"  type="primary" @click.stop="revision(detailsData)"> 调整 </el-button> -->
              </span>
              <span v-else>{{ detailsData[item.prop] }}</span>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <!-- 返回 -->
      <el-button type="primary" @click="back" class="back-btn">返 回</el-button>
      <!-- 查询pos机 -->

      <RevisionForm ref="revisionForm" @saveRevision="saveRevision"></RevisionForm>
    </div>


    <el-dialog v-model="centerDialogVisible" title="邮箱解绑" width="30%" center>
      <span>
        确认将该银行卡关联的邮箱解绑吗？解绑后，银行账号无绑定邮箱
      </span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click.stop="subUnbindEmail(detailsData)">
            确认解绑
          </el-button>
        </span>
      </template>
    </el-dialog>
  </template>
  <script setup>
  import RevisionForm from './components/RevisionForm.vue'


  import { userDetail,updateAbnormal,unbindEmail } from '@/api/userManage/userManage';
  import { onMounted, ref } from 'vue';
  import { useRoute ,useRouter} from 'vue-router';
  import { ElMessage, ElLoading } from 'element-plus';

  const revisionForm = ref(null);
  const route = useRoute();
  const router = useRouter();
  const activeName = ref('first');
  const detailsData = ref({});
  const loadingData = ref(false);
  const centerDialogVisible = ref(false);
  const baseProps = ref([
    { label: '用户编号', prop: 'user_id' },
    { label: '银行账户', prop: 'card_number' },
    { label: '有效期', prop: 'expire_date' },
    { label: '邮箱', prop: 'user_email' },
    { label: '异常消费', prop: 'abnormal' },
    { label: '注册时间', prop: 'create_time' },
    { label: '最近消费时间', prop: 'last_request_time' }
  ])
  
  // methods
  const handleClick = async (tab) => {
    activeName.value = tab.paneName;
  }
  
  const back = () => {
    router.go(-1);
  }

  const revision = (data) => {
    console.log(data)
    revisionForm.value.dialogVisible = true;
    revisionForm.value.formData = data;
  }

  const subUnbindEmail = async (data) => {

    loadingData.value = true;
    const res = await unbindEmail(data.user_id);
    loadingData.value = false;
    if (res.code === 1000) {
      ElMessage.success(res.message);
    }
  }


  const saveRevision =async (formData) => {
    revisionForm.value.dialogVisible = false;
      loadingData.value = true;
      const res = await updateAbnormal(formData);
      if (res.code == 1000) {

        loadUserDetail()
        ElMessage.success('提交成功');
      }
      loadingData.value = false;
  } 
  const loadUserDetail = async () => {
    loadingData.value = true;
    const res = await userDetail(route.query.user_no);
    loadingData.value = false;
    if (res.code === 1000) {
      detailsData.value = res.data;
    }
  }
  // life
  onMounted(()=>{
    loadUserDetail()
  }
  )
  </script>
  <style lang="less" scoped>
  .details-box {
    margin: 20px;
  
    .my-label {
      width: 120px;
    }
  
    .association {
      width: 100%;
      margin-bottom: 10px;
  
      p {
        margin-left: 30px;
      }
    }
  }
  .back-btn{
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
  }
  </style>